<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>About us</title>
  <link rel="stylesheet" href="About us.css">
</head>

<body>
  <div class="bg">
  <!-- header -->
  <header>
    <img src="./images/logo.png" class="logo" alt="Logo">
    <ul>
      <li><a href="./index.html" class="active">首页</a></li>
      <li><a href="#">游戏</a></li>
      <li><a href="./About us.html" class="about">关于我们</a></li>
      <li><a href="#">我们的仓库</a></li>
    </ul>
  </header>
  <section>
    <img src="./images/lx_bg2.png" id="stars">
  </section>
  <!-- main -->
  <div class="container">
    <div class="block_y"></div>
    <div>
      <p class="title">ABOUT</p>
      <div id="button">
        <p class="title">US #</p>
        <button><a href="#">EXPLAINER VIDEOS</a></button>
      </div>
    </div>
    <div class="member">
      <P>PARTICIPANTS</P>
      <div class="mem">
        <div class="member_f">
          <div class="member_f_1">
            <img src="./images/cjy.jpg" alt="" id="mem">
            <p>陈杰妍</p>
            <p>ChenJieYan</p>
          </div>
          <div class="member_f_1">
            <img src="./images/sjx.jpg" alt="" id="mem">
            <p>苏嘉欣</p>
            <p>SuJiaXin</p>
          </div>
          <div class="member_f_1">
            <img src="./images/qsj.jpg" alt="" id="mem">
            <p>秦思洁</p>
            <p>QinSiJie</p>
          </div>
        </div>
        <div class="member_s">
          <div class="member_f_1">
            <img src="./images/gx.jpg" alt="" id="mem">
            <p>高轩</p>
            <p>GaoXuan</p>
          </div>
          <div class="member_f_1">
            <img src="./images/lg.jpg" alt="" id="mem">
            <p>林静</p>
            <p>LinJing</p>
          </div>
        </div>
        <div class="copyright">
          <p>@画面的最终解释权归我们组所有</p>
        </div>
      </div>
    </div>
  </div>
  </div>
  <script>
    let stars = document.getElementById('stars')
    let header = document.querySelector('header')

    window.addEventListener('scroll', function () {
      let value = window.scrollY;
      stars.style.left = value * 0.25 + 'px'
      text.style.marginRight = value * 4 + 'px'
      text.style.marginTop = value * 1.5 + 'px'
      btn.style.marginTop = value * 1.5 + 'px'
      header.style.top = value * 0.5 + 'px'
    })
  </script>
</body>

</html>